<template>
	<el-checkbox class="sw-icon-badge-selected topic_item" :label="data.id">
		<div class="item">
			<span class="label">课题状态：</span>
			<span class="value">
				<el-tag size="medium" :type="topicStatus.type">{{ topicStatus.text }}</el-tag>
			</span>
		</div>
		<div class="item">
			<span class="label">课题编码：</span>
			<span class="value">{{ data.filed1 }}</span>
		</div>
		<div class="title">
			<span class="label">课题名称：</span>
			<span class="value">{{ data.name }}</span>
		</div>
		<div class="item">
			<span class="label">研究领域：</span>
			<span class="value">{{ sectorNameData }}</span>
		</div>
		<div class="item">
			<span class="label">用户单位：</span>
			<span class="value">{{ data.companyName }}</span>
		</div>
		<div class="item">
			<span class="label">PI：</span>
			<span class="value">{{ piNameData }}</span>
		</div>
		<div class="item">
			<span class="label">测量技术：</span>
			<span class="value">{{ measureNameData }}</span>
		</div>
		<div class="button">
			<el-button type="text" v-hasPermi="authBtns.detail" @click="handleLookDetail(data.id)">详情</el-button>
			<el-button type="text" v-hasPermi="authBtns.update" @click="handleEditData(data.id)">修改</el-button>
			<el-button type="text" v-hasPermi="authBtns.delete" @click="handleDeleteData(data)">删除</el-button>
		</div>
	</el-checkbox>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
export default {
	props: {
		data: { type: Object, default: () => {} },
		authBtns: { type: Object, default: () => {} }
	},
	computed: {
		...mapGetters(['siteConfig']),
		topicStatus() {
			let obj = {};
			if (this.data.isSave === '2') {
				obj['text'] = '待提交';
			} else if (this.data.audit === '3') {
				obj['text'] = '待审核';
				obj['type'] = 'warning';
			} else if (this.data.audit === '2') {
				obj['text'] = '已退回';
				obj['type'] = 'danger';
			} else if (this.data.audit === '1') {
				obj['text'] = '已通过';
				obj['type'] = 'success';
			}
			return obj;
		},
		researchs() {
			return lodash.filter(this.siteConfig, { type: '1' });
		},
		piNameData() {
			let piArr = this.data.piList || [];
			return piArr.map((n) => n.pkName).join(' / ');
		},
		sectorNameData() {
			let sector = this.data.sector || '';
			let researchTree = this.$flatToTree(this.researchs, 'pid');
			let sectorData = lodash.find(researchTree, { name: sector });
			if (!sectorData) {
				return sector;
			} else if (!!sectorData.children && !!this.data.filed4) {
				return `${sectorData.name} / ${this.data.filed4}`;
			} else {
				return sectorData.name;
			}
		},
		measureNameData() {
			let measureArr = this.data.measureList || [];
			return measureArr.map((n) => n.piId).join(' / ');
		}
	},
	methods: {
		handleEditData(id) {
			this.$router.push({ path: '/front/topic/form', query: { id } });
		},

		handleLookDetail(id) {
			this.$router.push({ path: `/front/topic/${id}` });
		},
		handleDeleteData(row) {
			this.$emit('delete', row);
		}
	}
};
</script>

<style lang="scss" scoped>
.el-checkbox.topic_item {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	border: solid 1px #ebeef5;
	transition: all 0.3s;
	border-radius: 4px;
	overflow: hidden;
	margin-right: 0;
	padding: 10px 0;
	width: 100%;
	&::before {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 24px;
		color: var(--primary);
		display: none;
	}
	&.is-checked {
		border-color: var(--primary);
		&::before {
			display: block;
			z-index: 2;
		}
	}
	&:not(:first-child) {
		margin-top: 10px;
	}
	&:hover {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	&:deep(.el-checkbox__input) {
		display: none;
	}
	&:deep(.el-checkbox__label) {
		display: flex;
		flex-wrap: wrap;
		font-size: 16px;
		width: 100%;
		padding: 0;
	}
	.item,
	.title {
		display: flex;
		align-items: center;
		padding: 0 12px;
		color: #606266;
		height: 32px;
		span.label {
			color: #909399;
		}
		span.value {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.title {
		width: calc(100% - 400px);
	}
	.button {
		padding: 0 12px;
		margin-left: auto;
		.el-button {
			padding: 7px 0;
			font-size: 16px;
		}
	}
}
@media screen and (max-width: 768px) {
	.el-checkbox.topic_item .title {
		width: 100%;
	}
}
</style>
